How to Create a Global Custom 404 Page for Route Groups in Next.js

Implementing a custom 404 page in Next.js becomes unexpectedly tricky when using route groups. While group-specific not-found.jsx files work as expected, unmatched routes fall back to the default Next.js 404, breaking visual consistency. This article explains why this happens and shows a practical workaround using the experimental globalNotFound option to create a reusable, fully styled global 404 page.

Mastering Tables and Modals in Next.js 16: Patterns That Preserve State

Discover how to implement persistent data tables with edit modals in Next.js 16 using dynamic routes, intercepting routes, and hybrid patterns — with examples, pitfalls, and the recommended final architecture.

Optimizing End-to-End Testing with Playwright: A Practical Guide

End-to-end (E2E) testing is a crucial step in ensuring that web applications function as expected across different scenarios, devices, and browsers. However, maintaining efficient and reliable tests can be challenging. This is where Playwright shines — offering a powerful and developer-friendly framework for robust E2E automation.

Next.js 15 Tutorial: Build a Full-Stack App with Ant Design & React Query

Next.js 15 is redefining server-side React development, offering built-in optimizations for routing, caching, and image handling. In this step-by-step tutorial, we will build a dynamic records management app using Ant Design 5 for UI components and React Query 5 for efficient data fetching. Learn how to streamline development, minimize boilerplate, and optimize performance with Next.js best practices. Get started today!

Refactoring Legacy React Code: Moving from OOP to Functional Components

When React Hooks arrived in 2019, switching to functional components seemed impractical. But as the ecosystem evolved, new techniques emerged. This article explores key strategies for migrating class-based components to modern React patterns—leveraging composition, useImperativeHandle, and function-based customization. Ready to embrace the future of React?

From Zero to Blog: Getting Started with Hugo

Eventually I finished redesign of this blog. I migrated from a self-made CMS to... a static site generator. It turned out to be not just more secure, reliable and faster, but also it gave me more flexibility. I’ve chosen Hugo, `world’s fastest` and extremely popular site generator. It has fully justified my trust. So I decided to share my experience of building a blog with Hugo.

Puppetry 3: Test Automation without Coding

Nowadays nobody would argue the importance of automated testing. Yet end-to-end tests are often hard to write and even harder to maintain. There are many solutions to help with it. Puppetry is a test constructor, which allows you building test suites without any coding. QA-engineer can record user scenario in a built-in browser, extend the generated test case with browser commands and assertions, manage the suite structure (like drag’n’drop) and run tests. Puppetry translates Gherkins-styled test specification into a Jest/Puppeteer project, executes it and shows the report. This project can be simply plugged in CI/CD pipeline.

Enhancing UX with LQIP: How to Build an Awesome Image Preview

Images in HTML, what could be easier? However when you have many of them on a page, they do not appear immediately. That depends on caching strategy and bandwidth, but still if you don’t take a special care it may look quite ugly. Basically we need to fill in the slots with something appropriate while images are loading. In other words we need placeholders. Probably the most prominent technique here is LQIP (low quality image placeholder). It was adopted by Google, Facebook, Pinterest, Medium and others. The idea is to load page initially with low quality images and once the page is fully loaded replace them with full quality ones. As placeholder one can use embedded transparent SVG, spinner animated image, solid color, blurred and minified original image. But even more, with modern tools we can do something really fancy. For example, we can use images shape or silhouette as a placeholder. Moreover, we can generate Data-URLs with desired effect during the build and address from IMG tag.

Testing Email Activation in Sign-Up Flows: A Step-by-Step Guide

Functional testing isn’t something new. We all do it, less or more, with different tools and approaches. However when it comes to flows, where transactional emails (signup confirmations, password resets, purchase notifications and others) involved that may still bring questions. For example, we instruct the testing tool to navigate to the registration page, fill out the form and press the submit button. The web-application sends email with activation link. So we need the testing tool to read the email message, parse it and navigate the link.

In this article we examine testing user signup flow with confirmation by email with 3 different tools: Selenium WebDriver, Cypress and Puppetry.

Puppetry 2.0 released

Eventually Puppetry 2.0 was released. The development took for a while, yet it contains a lot of changes. In fact the branch 1.x was basically a GUI for Puppeteer/Jest, but the tool grew up into a fully-fledged testing environment. Now Puppetry has a built-in templating engine, which supports environment-dependent variables and expressions, what brings a great potential. Just consider: you have test/stage service, which never resets. The only way to test, let’s say, signup flow is to create a new (no-yet-existing) user account. Now we can refer from our test cases to a variable...

Validating Function Arguments in JavaScript: The Smart Way

In software engineering we try to discover and eliminate bugs as soon as possible. One of most important heuristics here is validation of input/output on functions and methods. If you are going with TypeScript or Flow, you are fine. But if not? Then we have to manually validate at least input (arguments). But what would be the best way doing it?

Puppeteer for E2E Testing: How to Automate Your Web Tests

A sound application architecture doesnt resist to changes, but welcomes them. Yet it still doesnt guarantee that the code is unbroken after we implement new features, making fixes or refactoring. Here we run automated tests to ensure that the app integrity didnt suffer. So we write unit-tests to check if separate objects, methods, functions work property independently. With integration tests we ensure they play as designed together. Eventually we create system tests to find out if the entire system meets our business requirements. The last one is also known as E2E testing and covers different aspects such functionality, GUI/Usability, security performance. As for functional testing I have already published a few articles sharing my experience with such tools as Nightmare and Zombie.js. They both provide nice programming experience, but still have their drawbacks. Then I asked myself what could serve me better? What I need is an execution environment accessible from both command-line interface and in a browser. Thus I can run the tests during CI (e.g. by Jenkins), but still use interactive mode while debugging the tests. Besides I prefer to have access to the latest features emerging with evergreen browsers. That makes me think of Headless Chrome. Does it have a Node.js API? It turned out it does. The library is called Puppeteer and its truly amazing. Below we are going to examine it by writing a test suite for an RWD demo app with a form.